<template>
  <div class="mod-home">
    <div>
      <div class="cards">
        <div class="card" v-for="item in cards" :key="item.id" :class="item.bgc">
          <div class="card-img">
            <img src="../../assets/img/home/u43.png" alt="" />
          </div>
          <div class="card-cont">
            <p class="text">{{ item.text }}</p>
            <p class="sum">{{ item.sum }}</p>
          </div>
        </div>
      </div>
      <!-- <div class="mode-home-title">数据统计</div> -->
      <div class="data-static">
        <div class="detail">
          <div class="pieChart">
            <div class="chart-title">
              <img class="title-img" src="../../assets/img/home/u64.png" alt="" />
              <span>渠道规则组</span>
            </div>
            <div style="height: calc(100% - 40px); width: 100%" id="pie1"></div>
          </div>
          <div class="pieChart">
            <div class="chart-title">
              <img class="title-img" src="../../assets/img/home/u67.png" alt="" />
              <span>场景案例</span>
            </div>
            <div style="height: calc(100% - 40px); width: 100%" id="pie2"></div>
          </div>
        </div>
        <!-- 规划 -->
        <!-- <div class="detail">
          <div class="line-chart">
            <div class="chart-title">
              <img class="title-img" src="../../assets/img/home/u70.png" alt="" />
              <span>测试请求监控</span>
            </div>
            <div style="height: calc(100% - 40px); width: 100%" id="linechart"></div>
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import {
  taskCount,
  interfaceCaseCount,
  caseTestCount,
  channelList
} from "@/api/home.js";
export default {
  name: "App",
  data() {
    return {
      channelList: [],
      channelvisible: false,
      imgUrl: require("@/assets/img/index.png"),
      cards: [
        {
          id: 1,
          text: "编辑中",
          sum: "",
          bgc: "card1",
        },
        {
          id: 2,
          text: "待发布测试",
          sum: "",
          bgc: "card2",
        },
        {
          id: 3,
          text: "已发布测试",
          sum: "280个",
          bgc: "card3",
        },
        {
          id: 4,
          text: "已发布生产",
          sum: "",
          bgc: "",
        },
      ],
      pie1Option: {
        tooltip: {
          trigger: "item",
        },
        legend: {
          bottom: "5%",
          left: "center",
          data: [],
        },
        color: ["#f86ca7", "#009cff", "#feab1d", "#9d6fe9", "#1bd9c0"],
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["50%", "40%"],
            center: ["50%", "40%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              // { value: 1048, name: "A渠道" },
              // { value: 735, name: "B渠道" },
              // { value: 580, name: "C渠道" },
              // { value: 484, name: "D渠道" },
              // { value: 300, name: "E渠道" },
            ],
          },
        ],
      },
      pie2Option: {
        color: ["#f86ca7", "#009cff", "#feab1d", "#9d6fe9", "#1bd9c0"],
        tooltip: {
          trigger: "item",
        },
        legend: {
          bottom: "5%",
          left: "center",
          data: [],
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "50%",
            center: ["50%", "40%"],
            data: [
              // { value: 1048, name: "A场景" },
              // { value: 735, name: "B场景" },
              // { value: 580, name: "C场景" },
              // { value: 484, name: "D场景" },
            ],
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
          },
        ],
      },
      lineOption: {
        color: ["#029be5"],
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [
              "1日",
              "2日",
              "3日",
              "4日",
              "5日",
              "6日",
              "7日",
              "8日",
              "9日",
              "10日",
              "11日",
              "12日",
              "13日",
              "14日",
              "15日",
              "16日",
              "17日",
              "18日",
              "19日",
              "20日",
              "21日",
              "22日",
              "23日",
              "24日",
              "25日",
              "26日",
              "27日",
              "28日",
              "29日",
              "30日",
              "31日",
            ],
            //设置字体倾斜
            axisLabel: {
              // interval: 0,
              rotate: 45, //倾斜度 -90 至 90 默认为0
              // textStyle: {
              //   fontWeight: "bolder",
              //   color: "#000000",
              // },
            },
          },
        ],
        yAxis: {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
            },
          },
        },
        series: [
          {
            data: [],
            type: "line",
          },
        ],
      },
    };
  },

  created() {
    // console.log(this.$store.state.channel,JSON.stringify(this.$store.state.channel)==="{}",'this.$store.state.channel');
    if (JSON.stringify(this.$store.state.channel) === "{}") {
      this.channelvisible = true
    }
    this.getcards();
    this.$nextTick(() => {
      this.getChannelList();
      this.drawLine();
      this.getpie2data();
      this.getlinedata();
    });
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let pie1Chart = this.$echarts.init(document.getElementById("pie1"));
      pie1Chart.setOption(this.pie1Option);
    },
    checkChanel(item) {
      this.$store.commit("checkChanel", item);
      this.channelvisible = false;
    },
    getcards() {
      taskCount({}).then((res) => {
        // console.log(res);
        if (res.data.resultCode === 0) {
          let data = res.data.data;
          this.cards.forEach((item) => {
            for (const key in data) {
              if (item.text == key) {
                // this.$set(item,'sum',`${data[key]}个`)
                item.sum = `${data[key]}个`;
              }
            }
          });
        }
      });
    },
    getlinedata() {
      caseTestCount({}).then((res) => {
        // console.log(res);
        if (res.data.resultCode === 0) {
          let data = res.data.data;
          let xAxis = [];
          let series = [];
          data.forEach((t, i) => {
            series.push(t.count);
            if (t.creTime) {
              let d = t.creTime;
              d = d.substring(d.length - 2, d.length);
              // console.log(d);
              if (d < 10) {
                d = d.substring(d.length - 1, d.length);
              }
              d = `${d}日`;
              xAxis.push(d);
            }
          });
          this.lineOption.series[0].data = series;
          this.lineOption.xAxis[0].data = xAxis;
          let linechart = this.$echarts.init(
            document.getElementById("linechart")
          );
          linechart.setOption(this.lineOption);
        }
      });
    },
    getpie2data() {
      interfaceCaseCount({}).then((res) => {
        // console.log(res);
        if (res.data.resultCode === 0) {
          let data = res.data.data;
          let legend = [];
          let series = [];
          data.forEach((e, i) => {
            legend.push(e.caseName);
            series[i] = {};
            series[i].value = e.count;
            series[i].name = e.caseName;
          });
          this.pie2Option.series[0].data = series;
          this.pie2Option.legend.data = legend;
          // console.log(data, this.pie2Option);
          let pie2Chart = this.$echarts.init(document.getElementById("pie2"));
          pie2Chart.setOption(this.pie2Option);
        }
      });
    },
    getChannelList() {
      channelList({}).then((res) => {
        // console.log(res);

        if (res.data.resultCode === 0) {
          this.channelList = res.data.data;
          this.$store.commit("checkChanel", this.channelList[1]);
        }
      });
    },
  },
  mounted() { },
};
</script>
<style lang="less">
.mod-home > .el-dialog__wrapper .el-dialog .el-dialog__header {
  border-bottom: 1px solid #efefef;
}
</style>
<style lang="less" scoped>
.channelmain {
  width: 100%;
  display: flex;
  .channel-demo {
    margin-top: 40px;
    margin-left: 60px;
    .img {
      width: 64px;
      height: 64px;
    }
    p {
      margin-top: 12px;
      line-height: 28px;
      font-size: 14px;
      color: #333333;
      text-align: center;
    }
  }
}
.cards {
  width: 100%;
  // height: 200px;
  // margin: 20px 20px 0 20px;
  display: flex;
  justify-content: space-between;
  .card {
    flex: 1;
    height: 150px;
    margin-right: 40px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    background-size: 100%;
    background-image: linear-gradient(#14a1f7, #4e71f0);
    display: flex;
    &:last-child {
      margin-right: 0px;
    }
    .card-img {
      width: 140px;
      line-height: 145px;
      text-align: center;
      img {
        width: 70px;
        height: auto;
        vertical-align: middle;
      }
    }
    .card-cont {
      margin-top: 36px;
      color: #ffffff;
      .text {
        font-size: 20px;
        font-weight: 700;
      }
      .sum {
        margin-top: 5px;
        font-size: 36px;
        font-weight: 900;
      }
    }
  }
  .card1 {
    background-image: linear-gradient(#8791f3, #976afe);
  }
  .card2 {
    background-image: linear-gradient(#ee93eb, #8664fb);
  }
  .card3 {
    background-image: linear-gradient(#ffa797, #ff647b);
  }
  &:nth-child(4) {
    margin-right: 0px;
  }
}
.data-static {
  .data-title {
    padding-left: 10px;
    height: 48px;
    display: flex;
    border-bottom: 1px solid rgb(225, 225, 225);
    .title-img {
      width: 32px;
      height: 32px;
      margin-right: 20px;
    }
    span {
      font-size: 18px;
      color: #333333;
      font-weight: bold;
    }
  }
}
img {
  width: 100%;
  height: 100%;
}
.detail {
  height: 400px;
  width: 100%;
  padding: 10px 0px 0px;
  display: flex;

  .pieChart:first-child {
    margin-right: 10px;
  }

  .pieChart,
  .line-chart {
    flex: 1;    
    padding: 10px;
    border: 1px solid #ececec;
    border-radius: 5px;
    .chart-title {
      display: flex;
      width: 100%;
      height: 40px;
      line-height: 40px;
      .title-img {
        width: 24px;
        height: 24px;
        margin: 8px;
        span {
          color: #666666;
          font-weight: 700px;
          font-size: 16px;
        }
      }
    }
  }
  .line-chart {
    flex: 2;
    border: 1px solid rgb(225, 225, 225);
  }
}
</style>

